<template>
  <div>
    <div class="topTab">
      <div class="tabBox">
        <div
          v-for="(item,index) in tabTitle"
          :key="index"
          :class="item.bool?'tabOk':'tanNo'"
          @click="tabClick(item.idx)"
        >{{item.name}}</div>
      </div>
    </div>
    <div class="backgroundColor">
      <scroll-view
        scroll-y
        style="height:calc(100% - 42px)"
        @scrolltolower="handleLoadMore"
      >
        <div class="contentList" v-for="(item,index) in list" :key="index">
          <div class="listTop">
            <div class="listTopLeft">
              <p>{{item.couponTypeName}}</p>
              <span v-if="item.couponType === '1'">满{{item.reachAmount}}可用</span>
              <span v-else>0元可用</span>
              <label>{{item.couponType === '1' ? '满减' + item.reduceAmount + '元' : item.couponType === '2' ? '￥'+ item.cashAmount : item.discountRate + '折'}}</label>
            </div>
            <div class="listTopRight">
              <p>{{item.number - item.receivedNumber}}</p>
              <span>剩余张数</span>
            </div>
          </div>
          <div :class="!item.customBool ? 'listBottom' : 'listBottom2'">
            <img
              class="listBottomImg"
              src="https://akk.028wkf.cn/kdb-weapp-img/img/yhqlx_wzk.png"
              mode="scaleToFill"
            />
            <div class="bigBox">
              <div class="mallBox">
                <p>{{item.validDateStart}}至{{item.validDateEnd}}</p>
                <span @click="findInfo(item)">查看详情</span>
              </div>
              <!-- 点击出来的详情 -->
              <div class="showInfoBox" v-if="item.customBool">
                <div class="showInfoInfo">
                  <!-- <p>领取门槛￥{{item.reachAmount}}</p> -->
                  <p>领取门槛￥{{item.consumeAmount}}</p>
                  <span>领取后有效天数{{item.validDate}}</span>
                </div>
                <div class="showInfoBtn">
                  <div @click="deleteCoupon(item.couponTypeId)">
                    <img
                      class="showInfoBtnImg"
                      src="https://akk.028wkf.cn/kdb-weapp-img/icon/yhq_sc.png"
                      mode="scaleToFill"
                    />
                    <span>删除</span>
                  </div>
                  <div @click="compileCoupon(item,'1')">
                    <img
                      class="showInfoBtnImg"
                      src="https://akk.028wkf.cn/kdb-weapp-img/icon/yhq_bj.png"
                      mode="scaleToFill"
                    />
                    <span>编辑</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="tintBool" class="tint">已经没有了</div>
      </scroll-view>
      <button class="addCoupon" @click="addCoupon('0')">添加优惠券</button>
    </div>
  </div>
</template>

<script>
import { FIND_COUPON_TYPE_PAGE_API, DELETE_COUPON_TYPE_API } from '@/api'

export default {
  components: {},

  data () {
    return {
      pageNo: 1,
      pageSize: 10,
      tintBool: false,
      couponList: [],
      tabCount: 0, // tab计数
      arrpages: 0, // 总条数
      tabTitle: [
        {
          idx: '0',
          name: '发放中',
          bool: true
        },
        {
          idx: '1',
          name: '停止发放',
          bool: false
        }
        // {
        //   idx: '2',
        //   name: '已失效',
        //   bool: false
        // }
      ],
      tabNum: 0
    }
  },
  created () {},
  computed: {
    account () {
      return this.$cookie.get('account')
    },
    list () {
      return this.couponList.map(_ => ({
        ..._,
        validDateStart: _.validDateStart.split(/[\s\n]/, [1]),
        validDateEnd: _.validDateEnd.split(/[\s\n]/, [1]),
        customBool: _.show,
        discountRate: (_.discountRate * 10).toFixed(1)
      }))
    }
  },
  onShow () {
    this.init()
  },
  methods: {
    tabClick (tab) {
      const vm = this
      vm.pageNo = 1
      vm.arrpages = 0
      vm.tabNum = tab
      for (let i = 0; i < vm.tabTitle.length; i++) {
        if (tab === vm.tabTitle[i].idx) {
          vm.tabTitle[i].bool = true
          vm.couponList = []
          vm._findCouponPage(tab)
        } else {
          vm.tabTitle[i].bool = false
        }
      }
    }, //
    findInfo (item) {
      let mark = this.couponList.filter(
        _ => _.couponTypeId === item.couponTypeId
      )[0]
      mark.show = !item.customBool
    }, // 查看详情
    _findCouponPage (tab) {
      const vm = this
      let params = {
        shopId: vm.account.shopId,
        state: tab
      }
      FIND_COUPON_TYPE_PAGE_API(params, vm.pageNo, vm.pageSize)
        .then(r => {
          if (r.data.code === '0') {
            vm.arrpages = r.data.data.pages
            if (r.data.data.total === 0) {
              vm.tintBool = true
              vm.couponList = []
            } else {
              vm.tintBool = false
              let { list } = r.data.data
              list.forEach(element => {
                vm.couponList.push({ ...element, show: false })
              })
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 请求优惠券列表
    deleteCoupon (val) {
      const vm = this
      vm.$dialog('确认删除该优惠券', '').then(() => {
        vm._deleteCoupon(val)
      })
    }, // 删除优惠券
    _deleteCoupon (val) {
      const vm = this
      DELETE_COUPON_TYPE_API(val, vm.account.shopId)
        .then(r => {
          if (r.data.code === '0' && r.data.data) {
            vm.$alert('删除优惠券成功', '').then(() => {
              this.deleteInit()
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    compileCoupon (item, val) {
      let data = {}
      for (let i = 0; i < this.couponList.length; i++) {
        if (item.couponTypeId === this.couponList[i].couponTypeId) {
          data = this.couponList[i]
        }
      }
      let data2 = JSON.stringify(data)
      this.$cookie.set('couponData', data2)
      this.$router.push('/pages/shop-management/coupon-info/main?val=' + val)
    }, // 编辑
    addCoupon (val) {
      this.$router.push('/pages/shop-management/coupon-info/main?val=' + val)
    }, // 新增
    handleLoadMore () {
      // if (e.mp.detail.direction === 'bottom') {
      //   if (this.pageNo <= this.arrpages) {
      //     // this._findCouponPage('0')
      //     this.pageNo += 1
      //     this._findCouponPage(this.tabNum)
      //   } else {
      //     this.tintBool = true
      //   }
      // }
      if (!this.tintBool) {
        if (this.pageNo <= this.arrpages) {
          // this._findCouponPage('0')
          this.pageNo += 1
          this._findCouponPage(this.tabNum)
        } else {
          this.tintBool = true
        }
      }
    }, // 滚动事件
    init () {
      // this._findCouponPage('0')
      this.pageNo = 1
      this._findCouponPage(this.tabNum)
      // this.tintBool = false
      this.couponList = []
      this.tabNum = 0
      this.tabTitle[0].bool = true
      this.tabTitle[1].bool = false
    },
    deleteInit () {
      this.pageNo = 1
      this._findCouponPage(this.tabNum)
      this.couponList = []
      this.tabNum = 0
    }
  }
}
</script>

<style lang="scss">
.topTab {
  width: 100%;
  height: 60px;
  background: #5d93fd;
  display: flex;
  justify-content: center;
  align-items: center;
  .tabBox {
    width: 320px;
    height: 30px;
    border-radius: 25px;
    border: 1px solid #fff;
    display: flex;
    div {
      width: 50%;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    div:nth-child(1) {
      border-top-left-radius: 25px;
      border-bottom-left-radius: 25px;
    }
    div:nth-child(2) {
      border-top-right-radius: 25px;
      border-bottom-right-radius: 25px;
    }
    .tabOk {
      background: #fff;
      color: #5d93fd;
    }
    .tanNo {
      background: #5d93fd;
      color: #fff;
    }
  }
}
.backgroundColor {
  width: 100%;
  height: 100%;
  background: #edf0f5;
  .contentList {
    width: 340px;
    margin: 20px auto;
    border-radius: 4px;
    background: #fff;
    position: relative;
    .listTop {
      height: 110px;
      display: flex;
      justify-content: space-between;
      div {
        min-width: 130px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .listTopLeft {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        p {
          width: 143px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          // text-align: center;
          font-size: 18px;
          color: #000;
          margin-left: 15px;
        }
        span {
          font-size: 14px;
          color: #787878;
          margin-left: 15px;
        }
        label {
          font-size: 16px;
          color: #6a8ae2;
          margin-left: 15px;
        }
      }
      .listTopRight {
        p {
          font-size: 22px;
          color: #6a8ae2;
        }
        span {
          font-size: 16px;
          color: #000;
        }
      }
    }
    .listBottom {
      position: relative;
      width: 100%;
      min-height: 40px;
      font-size: 14px;
      color: #fff;
      .listBottomImg {
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
        z-index: 1;
      }
      .bigBox {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 5;
        .mallBox {
          width: 100%;
          min-height: 40px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          p {
            margin-left: 15px;
          }
          span {
            margin-right: 15px;
          }
        }
      }
    }
    .listBottom2 {
      position: relative;
      width: 100%;
      min-height: 100px;
      font-size: 14px;
      color: #fff;
      .listBottomImg {
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
        z-index: 1;
      }
      .bigBox {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 5;
        .mallBox {
          width: 100%;
          min-height: 40px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          p {
            margin-left: 15px;
          }
          span {
            margin-right: 15px;
          }
        }
        .showInfoBox {
          width: 100%;
          .showInfoInfo {
            width: 310px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #fff;
          }
          .showInfoBtn {
            width: 310px;
            margin: auto;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            div {
              height: 36px;
              display: flex;
              align-items: center;
              .showInfoBtnImg {
                width: 16px;
                height: 16px;
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
  }
  .showBtn {
    font-size: 20px;
  }
  .addCoupon {
    width: 100%;
    height: 40px;
    background: #5d93fd;
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 5;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    border-radius: 0;
  }
  .tint {
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    color: #606266;
    border-top: 1px solid #5d93fd;
  }
}
</style>
